<template>
    <div class="amap-lookwz">
        <div>
            <el-button @click.stop="look" type="text">位置</el-button>
        </div>
        <el-dialog custom-class="amap-lookwz__dialog" :title="address" :append-to-body="true" width="1000px"
            :visible.sync="dialogFormVisible">
            <div class="amap-lookwz__map">
                <p class="amap-lookwz__latlng">经度：{{ lng }} —— 纬度：{{ lat }}</p>
                <el-amap :zooms="[5, 18]" :center="[lng, lat]" style="height: 60vh;" :vid="vid" :plugin="plugin">
                    <el-amap-marker mapStyle="dark" vid="component-marker" :position="[lng, lat]"></el-amap-marker>
                </el-amap>
            </div>
        </el-dialog>
    </div>
</template>
<style>
.el-dialog__body {
    padding: 0 20px 20px 20px;
}

.amap-lookwz__map {
    position: relative;
    z-index: 200;
}

.amap-lookwz__latlng {
    z-index: 201;
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    color: #fafafa;
    border-radius: 4px;
}
</style>

<script>
export default {
    name: 'LookPosition',
    props: {
        address: { default: '' },
        lat: { default: 0 },
        lng: { default: 0 },
        vid: { default: 'lookmap' },
    },//
    data() {
        return {
            dialogFormVisible: false,
            plugin: [{
                pName: 'ToolBar',
                position: 'LB'
            }]
        };
    },

    methods: {
        //查看位置
        look() {
            if (!this.address || !this.lat || !this.lng) {
                this.$message.warning("地图参数无效");
                return false;
            }
            this.dialogFormVisible = true;
        },
    }
};
</script>
